<template>
  <div class="warrper">
    <t-pull-down-refresh
      v-model="refreshing"
      :max-bar-height="100"
      :loading-texts="['下拉刷新', '松开刷新', '正在刷新', '刷新完成']"
      @refresh="onRefresh"
    >
      <div v-if="listData.length > 0" class="book-box">
        <waterfall
          :col="2"
          :gutterWidth="10"
          :data="listData"
          height="100%"
          @loadmore="onLoadMore"
          @scroll="onScroll"
          ref="waterfallBox"
        >
          <div
            v-for="(item, index) in listData"
            :key="index"
            class="item-box"
            @click="onDetail(item)"
          >
            <div class="item">
              <div class="img-box">
                <img class="img" :src="item.titleImg" />
                <div class="num-box">{{ item.imageCount }}p</div>
              </div>

              <div :class="`info ${item.title.length < 8 ? 'txt-center' : ''}`">
                {{ item.title }}
              </div>
            </div>
          </div>
        </waterfall>
      </div>
    </t-pull-down-refresh>
    <Empty v-if="listData.length <= 0"></Empty>
    <TabBar></TabBar>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  reactive,
  toRefs,
  onActivated,
  nextTick,
  toRaw,
} from "vue";
import { useRouter } from "vue-router";
import TabBar from "@/components/tabBar";
import squareApi from "@/api/squareApi.js";
import Empty from "@/components/Empty";
const router = useRouter();
let refreshing = ref(false);
let waterfallBox = ref(null);
const state = reactive({
  pageData: {
    page: 1,
    limit: 20,
  },
  listData: [],
  isLoading: false,
  scrollTop: 0,
});
const { listData } = toRefs(state);
// 下拉刷新
function onRefresh() {
  refreshing.value = true;
  if (!state.isLoading) {
    state.isLoading = true;
    state.pageData.page = 1;
    state.listData = [];
    getList();
  }
}
// 上拉加载
function onLoadMore() {
  console.log("more");
  if (!state.isLoading) {
    state.isLoading = true;
    state.pageData.page++;
    getList();
  }
}
// 记录滚动位置
function onScroll(event) {
  if (event.target) {
    state.scrollTop = event.target.scrollTop;
  }
}
// 跳转详情
function onDetail(data) {
  console.log("d", data, toRaw(data).photobookId);
  router.push({
    name: "squareDetail",
    query: {
      id: toRaw(data).photobookId,
    },
  });
}
// 获取写真列表
async function getList() {
  const result = await squareApi.list(state.pageData);
  state.isLoading = false;
  refreshing.value = false;
  if (result.code == 0) {
    state.listData = state.listData.concat(result.data.list);
  }
}
onActivated(() => {
  nextTick(() => {
    if (waterfallBox.value) {
      document.getElementById("vueWaterfall").scrollTop = state.scrollTop;
    }
  });
});
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
:deep(.vue-waterfall) {
  &::-webkit-scrollbar {
    display: none; /* 直接隐藏滚动条 */
  }
}
.warrper {
  padding: 10px;
  background-color: $bf5-color;
}
.book-box {
  height: calc(100vh - 90px);
  .item-box {
    padding: 10px 0;
    .item {
      border-radius: 10px;
      .img-box {
        position: relative;
        .num-box {
          position: absolute;
          bottom: 10px;
          right: 10px;
          z-index: 99;
          padding: 2px 4px;
          border-radius: 8px;
          font-size: 10px;
          background-color: $be9-color;
          color: $b10-color;
        }
      }
      .img {
        width: 100%;
      }
      .info {
        background-color: $b-color;
        text-align: left;
        padding: 4px 10px;
        &.txt-center {
          text-align: center;
        }
      }
    }
  }
}
</style>
